<template>
    <div class="module_11">
      <headers>
        <template v-slot:headerName>{{value1}}</template>
        <template v-slot:headerTitle>
          {{title}}
        </template>
      </headers>
      <div class="selected">
        <div class="times">
          <span>时间段:</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="goods">
          <span>商品类型:</span>
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="moduleContent">
        可视化图形表
      </div>
    </div>
</template>

<script>
    export default {
        name: "module_11",
        components:{
          headers: ()=>import('./../../components/public/header')
        },
        data(){
          return {
            name: '连衣裙',
            title: '价格与销量关系',
            options: [{
              value: '今天',
              label: '今天'
            }, {
              value: '昨天',
              label: '昨天'
            }, {
              value: '前三天',
              label: '前三天'
            }, {
              value: '前一周',
              label: '前一周'
            }],
            value: '',
            options1: [{
              value: '连衣裙',
              label: '连衣裙'
            }, {
              value: '旗袍',
              label: '旗袍'
            }, {
              value: '鞋子',
              label: '鞋子'
            }],
            value1: ''
          }
        }
    }
</script>

<style lang="scss" scoped>
  @import './../../assets/css/public/public';
  .module_11{
    .selected{
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      justify-items: flex-start;
      align-items:center;
      padding: $padding_10;
      .goods{
        margin-left: $margin_60;
      }
    }
    .moduleContent{
      background-color: pink;
      height: 500px;
      width: 100%;
    }
  }


</style>
